<template>
  <div>
    <a-transfer
      :data-source="deptList"
      show-search
      :listStyle="{width: '45%',height: '480px'}"
      :target-keys="deptIds"
      :render="item => item.title"
      @change="handleTransferChange"
      @search="handleSearch"
    />
  </div>
</template>

<script>
  import api from './js/api'
  export default {
    name: 'deptProject',
    components: {},
    data () {
      return {
        api: Object.assign(api, this.api),
        deptList: [],
        deptIds: [],
        formItem: {
          projectId: '',
          deptIds: []
        },
        form: {
          projectId: '',
          deptIds: []
        }
      }
    },
    methods: {
      setData(data) {
        if (data && data.projectId) {
          this.form.projectId = data.projectId
          this.getdeptProjectList(data.projectId)
        }
      },
      handleSubmit() {
             debugger
            this.http.post(this, {
              url: this.api.project.setprojectdept,
              data: {
                projectId: this.form.projectId,
                deptIds: this.deptIds.join(',')
              },
              success: function(me) {
                me.$emit('handleClose')
              }
            })
      },
      getdeptProjectList(projectId) {
        this.http.get(this, {
          url: this.api.project.getdeptList,
          data: {
            projectId: projectId
          },
          success: (me, data) => {
            let arrays = []
            data.deptList.forEach(item => {
              var datas = {}
              datas.key = item.id
              datas.title = item.name
              arrays.push(datas)
            })
            me.deptList = arrays
            me.deptIds = data.deptIds
          }
        })
      },
      handleTransferChange(targetKeys, direction, moveKeys) {
        this.deptIds = targetKeys
      },
      handleSearch(dir, value) {
        console.log('search:', dir, value)
      }
    },
    mounted: function() {
    }
  }
</script>
